<template>
  <div>
    <div class="zhuantizhuanlan">
      <div class="bd2 flex-col">
        <button class="section6 flex-col" @click="add">
          <span class="txt5">新增</span>
        </button>
        <div class="section7 flex-col">
          <ul class="itemlist">
            <li v-for="(item,index) in Alllinks" :key="item.id" class="main6 flex-row">
                  <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>
              <!-- <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="sPictureUrl" alt />
              </el-dialog> -->
              <p class="jianyi">
                图标: 建议尺寸：
                <span>308*70</span>，支持png,jpg,jpeg格式
              </p>
              <input
                type="text"
                placeholder="请输入链接地址"
                v-model="item.sLinkUrl"
                class="box7"
                @blur="urlBlur(item)"
                @change="addLinks"
              />
              <a class="delete" v-if="index > 4" :id="item.nPid" @click="dialogVisible=true">删除</a>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>此操作将永久删除该文件, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="DeleteLinks (item.nLid)">确 定</el-button>
          </span>
        </el-dialog>
            </li>
            <!-- 点击添加时出现的 -->
            <li class="main6 flex-row" v-show="isShow">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>
              <p class="jianyi">
                图标: 建议尺寸：
                <span>308*70</span>，支持png,jpg,jpeg格式
              </p>
              <input type="text" placeholder="请输入链接地址" v-model="sLinkUrl" class="box7" />
            </li>
          </ul>

          <div class="main7 flex-row">
            <button class="wrap3 flex-col" @click="addLinks">
              <span class="word8">保存</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Coolies from 'js-cookie'
export default {
  data () {
    return {
      dialogVisible:false,
      Alllinks: [],
      sPictureUrl: '',
      sLinkUrl: '',
      nTid: '3',
      nLid: 0,
      isShow: false,
      dialogVisible: false,
      ArrayList: [
      ],
      constants: {}
    };
  },
  created () {
    this.GetAlllinks()
  },
  methods: {
    urlBlur (e) {
      this.nLid = e.nLid
      this.sLinkUrl = e.sLinkUrl
    },
    add () {
      this.isShow = true
    },
    // 获取链接
    async GetAlllinks () {
      const { data: res } = await this.$http.get('/api/link/Get_Selectlinks', {
        params: {
          innTid: 2
        }
      })
      console.log(res);
      this.Alllinks = res

    },
    //  新增链接
    // 添加接口
    async addLinks () {
      this.isShow = false
      // this.bianmass = Coolies.get('bianma')
      // console.log(this.bianmass);
      // var bmls = this.biamas
      // console.log(bmls);
      //获取数据
      let formData = new FormData()
      formData.append('innTid', 2)
      formData.append('innLid', this.nLid)
      formData.append('insPictureUrl', this.images.img)
      formData.append('insLinkUrl', this.sLinkUrl)
      formData.append('insName', 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_Addlink', formData, config)
      console.log(res);
      let adLink = {
        nLid: this.nLid,
        sLinkUrl: this.sLinkUrl,
        sPictureUrl: this.images.img
      }
      this.Alllinks.push(adLink)
      this.Alllinks
      this.GetAlllinks()
      this.open2()
      // this.GetAllLinks()
      // this.$router.go(0)
    },
    // 图片上传成功的回调
    changeFile (file, fileList) {
      console.log(file.url);
      this.images = { img: file.url }
      // console.log(images);
      var This = this;
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        this.result // 这个就是base64编码了
        console.log(this.result);
        // var biamas = this.result
        Coolies.set('bianma', this.result)
      }
    },
     open2(){
     this.$message({
          message: '保存成功',
          type: 'success'
        });
    },
    // 删除链接
    async DeleteLinks (nLid) {
      this.dialogVisible=false
      this.nLid = nLid
      let formData = new FormData()
      formData.append('innLid', this.nLid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_deletelink', formData, config)
      console.log(res);
      this.GetAlllinks()
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
    },
    onClick_2 () {
      alert(1);
    },


  }
};
</script>

<style scoped lang="css" src="./assets/index.css" />
